<form nz-form [formGroup]="addForm" (ngSubmit)="submitForm()" style="max-width: 600px;">
  <!-- 姓名输入框，包含必填验证和长度验证 -->
  <nz-form-item>
    <nz-form-label [nzSpan]="7" nzRequired>姓名</nz-form-label>
    <nz-form-control [nzSpan]="12" nzHasFeedback [nzErrorTip]="userErrorTpl">
      <input nz-input formControlName="name" placeholder="请输入姓名"/>
      <ng-template #userErrorTpl let-control>
        @if (control.errors?.['required']) {
          姓名为必填项
        }
        @if (control.errors?.['minlength']) {
          最少填写2个字符
        }
      </ng-template>
    </nz-form-control>
  </nz-form-item>
  <!-- 性别选择，为必选项 -->
  <nz-form-item>
    <nz-form-label [nzSpan]="7" nzRequired>性别</nz-form-label>
    <nz-form-control [nzSpan]="12" nzHasFeedback [nzErrorTip]="genderErrorTpl">
      <nz-radio-group formControlName="gender">
        <label nz-radio nzValue="1">男</label>
        <label nz-radio nzValue="0">女</label>
      </nz-radio-group>
      <ng-template #genderErrorTpl let-control>
        @if (control.errors?.['required']) {
          性别为必选项
        }
      </ng-template>
    </nz-form-control>
  </nz-form-item>
  <!-- 邮箱输入框，包含邮箱格式验证 -->
  <nz-form-item>
    <nz-form-label [nzSpan]="7" nzRequired>邮箱</nz-form-label>
    <nz-form-control [nzSpan]="12" nzHasFeedback [nzErrorTip]="emailErrorTpl">
      <input nz-input formControlName="email" placeholder="请输入邮箱" type="email"/>
      <ng-template #emailErrorTpl let-control>
        @if (control.errors?.['email']) {
          邮箱格式错误
        }
      </ng-template>
    </nz-form-control>
  </nz-form-item>
  <!-- 手机号输入框，包含手机号格式验证 -->
  <nz-form-item>
    <nz-form-label [nzSpan]="7">手机号</nz-form-label>
    <nz-form-control [nzSpan]="12" nzHasFeedback [nzErrorTip]="phoneNumberErrorTpl">
      <input nz-input formControlName="phoneNumber" placeholder="请输入手机号"/>
      <ng-template #phoneNumberErrorTpl let-control>
        @if (control.errors?.['pattern']) {
          手机号格式错误
        }
      </ng-template>
    </nz-form-control>
  </nz-form-item>
  <!-- 入职时间选择，不得晚于当前时间 -->
  <nz-form-item>
    <nz-form-label [nzSpan]="7">入职时间</nz-form-label>
    <nz-form-control [nzSpan]="12" nzHasFeedback [nzErrorTip]="joinDateErrorTpl">
      <nz-date-picker formControlName="joinDate"></nz-date-picker>
      <ng-template #joinDateErrorTpl let-control>
        @if (control.errors?.['date']) {
          入职时间不得晚于今天
        }
      </ng-template>
    </nz-form-control>
  </nz-form-item>
  <!-- 提交和重置按钮 -->
  <nz-form-item>
    <nz-form-control [nzOffset]="7" [nzSpan]="12">
      <button nz-button nzType="primary" [disabled]="!addForm.valid">添加</button>
      <button nz-button (click)="resetForm($event)" style="margin-left: 8px;">重置</button>
    </nz-form-control>
  </nz-form-item>
</form>
